<!--播报组件-->
<template>
  <div v-if="tools.NotIsNull(item.ttsOssUrl) && !isPaused" class="horn-my" @click.stop="showAudio(item)"><i class="icon-horn"></i><div>播报</div></div>
  <div v-else-if="tools.NotIsNull(item.ttsOssUrl) && isPaused" class="horn-my" @click.stop="pause()"><i class="icon-pause"></i><div>暂停</div></div>
  <div v-else-if="!tools.NotIsNull(item.ttsOssUrl) && isShow !==false">阅读 {{ item.views || 0 }}</div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    name: 'broadcastComponent',
    props: ['item','isShow'],
    data () {
      return {
        clickTime: 0,
        isPaused: !true
      }
    },
    watch: {
      PLAY_BROADCAST(newVal, oldVal) {
        let id = this.item.id
        this.isPaused = (this.$store.state.PLAY_BROADCAST && this.$store.state.PLAY_BROADCAST === id)
      }
    },
    computed: {
      ...mapState(["PLAY_BROADCAST"]),
    },
    methods: {
      /*播报相关*/
      showAudio(item){//开始播报
        if (Date.now() - this.clickTime <= 300) return false;
        this.clickTime = Date.now();
        let url = item.ttsOssUrl
        let title = item.title.replace(/<span([^<>]*)>(.*?)<\/span>/gi, '$2')
        window.audioPlayer.playBroadcast(title,url,item.id,true)
      },
      getIsBroadcast(id){ //获取当前的id是否是播放状态
        return (this.$store.state.PLAY_BROADCAST && this.$store.state.PLAY_BROADCAST === id)
      },
      pause(){//暂停播报
        this.clickTime = Date.now();
        window.audioPlayer.pause()
      },
      /*播报相关结束*/
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
</style>
